<template>
  <a-drawer
    placement="top"
    :closable="false"
    :visible="addVisible"
    height="100%"
    wrapClassName="add-power"
    @close="closeTopDrawer"
    :destroyOnClose="true"
    :headerStyle="{
      background: '#f0f1f5',
      padding: '0 0.2rem 0 0.3rem',
      flexGrow: 0,
    }"
    :bodyStyle="{
      padding: '0.3rem 0 0 0',
      flexGrow: 1,
    }"
    :drawerStyle="{
      display: 'flex',
      flexDirection: 'column',
    }"
  >
    <template #title>
      <div class="head-box">
        <span>添加新考核</span>
        <div class="head-btn">
          <a-button @click="closeTopDrawer">取消</a-button>
          <a-button type="primary" class="save-btn" @click="saveAdd"
            >保存</a-button
          >
        </div>
      </div>
    </template>
    <div class="content-box">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <div class="content-width">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="姓名" prop="name" required>
                <a-input v-model="form.name" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="工号" prop="jobNumber" required>
                <a-input v-model="form.jobNumber" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="部门" prop="department" required>
                <a-input
                  v-model="form.department"
                  class="input-width"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="考核要求" prop="requirements" required>
                <a-input
                  v-model="form.requirements"
                  class="input-width"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="评分" prop="score" required>
                <a-input v-model="form.score" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="是否合格" prop="qualified" required>
                <a-radio-group v-model="form.qualified">
                  <a-radio value="1"> 合格 </a-radio>
                  <a-radio value="0"> 不合格 </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="月份" prop="month" required>
                <a-month-picker v-model="form.month" />
                <!-- <a-input v-model="form.month" class="input-width"></a-input> -->
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                label="年终考核结果"
                prop="yearResult"
                required
              >
                <a-radio-group v-model="form.yearResult">
                  <a-radio value="1"> 合格 </a-radio>
                  <a-radio value="0"> 不合格 </a-radio>
                  <a-radio value="2"> 良好 </a-radio>
                  <a-radio value="3"> 优秀 </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </div>
  </a-drawer>
</template>
  <script>
import { examineSaveSingle } from "@/api/operationApi.js";
import moment from "moment";
export default {
  data() {
    return {
      form: {
        name: "",
        jobNumber: "",
        department: "",
        requirements: "",
        score: "",
        qualified: "1",
        month: "",
        yearResult: "1",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请填写姓名",
            trigger: "blur",
          },
        ],
        jobNumber: [
          {
            required: true,
            message: "请填写工号",
            trigger: "blur",
          },
        ],
        department: [
          {
            required: true,
            message: "请填写部门",
            trigger: "blur",
          },
        ],
        requirements: [
          {
            required: true,
            message: "请填写考核要求",
            trigger: "blur",
          },
        ],
        score: [
          {
            required: true,
            message: "请填写评分",
            trigger: "blur",
          },
        ],
        month: [
          {
            required: true,
            message: "请填写月份",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    addVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    saveAdd() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form));
          params.month = moment(params.inTime).format("YYYY-MM-DD HH:mm:ss");
          examineSaveSingle(params).then((res) => {
            this.$message.success("新增考核成功");
            this.$emit("reloadList");
            this.reset();
            this.$emit("update:addVisible", false);
          });
        }
      });
    },
    closeTopDrawer() {
      this.$emit("update:addVisible", false);
    },
    reset() {
      this.form = {
        name: "",
        jobNumber: "",
        department: "",
        requirements: "",
        score: "",
        qualified: "1",
        month: "",
        yearResult: "1",
      };
    },
  },
};
</script>
  <style lang="less" scoped>
.add-power {
  .head-box {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 20px;
      color: #252b3a;
    }
    .head-btn {
      .ant-btn {
        height: 32px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    .ant-input {
      height: 32px;
    }
    .ant-form {
      height: 100%;
    }
    .input-width {
      width: 80%;
    }
    .content-width {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      /deep/.ant-form-item {
        margin-bottom: 10px;
        /deep/.ant-form-item-label {
          font-size: 12px;
          label {
            font-size: 14px;
          }
        }
      }
      /deep/.ant-form-explain {
        font-size: 12px;
      }
    }
  }
}
</style>